<template>
  <div class="window">
    <div class="main">
      <div @click="dialogVisible = true" class="role">进 入</div>
    </div>
    <el-dialog
      title="请输入姓名"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <el-input v-model="name"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleLogin">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {apiAuth} from '@/properties/api.js'

export default {
  name: 'Login',
  data () {
    return {
      name: '',
      dialogVisible: false
    }
  },
  mounted () {

  },
  methods: {
    login (name, cbOk, cbErr) {
      this.$axios.post(
        apiAuth.login,
        {
          name: name
        },
        cbOk,
        cbErr
      )
    },

    handleLogin () {
      let $this = this
      $this.login(
        $this.name,
        function (res) {
          $this.$message.success('登陆成功')
          $this.$router.push({ name: 'ChatRoom', query: { name: $this.name } })
        }, function (err) {
          $this.$message.error(err.msg)
        }
      )
    }
  }
}
</script>

<style scoped>
.window {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: beige;
}

.main {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.role {
  border-radius: 10px;
  color: blue;
  background-color: #99a9bf;
  text-align: center;
  width: 30%;
  height: 12vh;
  line-height: 12vh;
  margin: 30px auto;
  font-size: 4vw;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
}

.role:hover {
  background-color: coral;
}

.dialog-footer {
  text-align: center;
}
</style>
